<template>
 <el-main>
  <div class="menmuTitle">
   <h1>{{ $t('user.withdrawal.title') }}</h1>

   <div class="goLink pointer hoverTr3" @click="details">
    {{ $t('user.withdrawal.details') }}

    <i class="el-icon-right"></i>
   </div>
  </div>

  <el-tabs v-model="active">
   <el-tab-pane v-for="(item, index) of tabs" :key="index" :label="item.name" :name="item.name">
    <span slot="label"><i :class="item.icon"></i> {{ item.name }}</span>
    <component :is="item.path" :tabs="currency" :load="loading" :active="currencyActive"></component>
   </el-tab-pane>
  </el-tabs>
 </el-main>
</template>

<script>
import Recharge from "@/views/User/Withdrawal/Recharge/Recharge";  // 充值
import Withdrawal from "@/views/User/Withdrawal/Withdrawal/Withdrawal";  // 提现

export default {
 name: "Withdrawal",
 components: {
  Recharge,
  Withdrawal
 },
 data: () => ({
  tabs: [
   {
    name: 'Recharge',
    icon: 'el-icon-money',
    path: Recharge
   },
   {
    name: 'Withdrawal',
    icon: 'el-icon-position',
    path: Withdrawal
   },
  ],
  active: 'Recharge',

  currency: [],
  currencyActive: '',
  loading: false
 }),
 created() {
  this.getAddress();

  const arr = [this.$t('user.withdrawal.recharge'), this.$t('user.withdrawal.withdrawal')]

  this.tabs.forEach((item, index) => {
   item.name = arr[index]
  })
  this.active = arr[0]
 },
 methods: {
  // 前往资产明细
  details () {
   this.$router.push({
    path: '/Details'
   })
  },
  // 获取提款地址
  getAddress () {
   this.loading = true
   this.$post(this.$address.recharge, {})
    .then(res => {
     this.loading = false
     if (res.code === 1) {
      this.currency = res.data;
      this.currencyActive = this.currency[0].coinCode
     }
    })
  },
 }
}
</script>

<style scoped lang="scss">
.el-main {
 .menmuTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h1 {
   font-size: 20px;
   font-weight: bold;
   color: #002445;
   position: relative;
   padding-bottom: 10px;

   &:after {
    display: block;
    content: "";
    width: 140px;
    height: 2px;
    background: #0d4fa5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px;
   }
  }

  .goLink {
   color: #002445;
   font-size: 16px;
   cursor: pointer;
   transition: .3s;

   i {
    color: #002445;
    font-size: 20px;
    position: relative;
    top: 2px;
    margin-left: 10px;
   }

   &:hover {
    transform: scale(1.3);
   }
  }
 }

 .el-tabs {
  margin-top: 30px;

  /deep/ .el-tabs__header {
   .el-tabs__nav-wrap {
    &:after {
     height: 0;
    }

    .el-tabs__nav-scroll {
     .el-tabs__nav {
      .el-tabs__active-bar {
       background-color: #000;
      }

      .el-tabs__item {
       color: #737373;
       font-weight: bold;
       font-size: 18px;

       span {
        padding: 0 20px 0 10px;
       }

       i {
        margin-right: 10px;
        font-size: 23px;
       }

       &.is-active {
        color: #000;
       }
      }
     }
    }
   }
  }
 }
}
</style>
